<template>
    <div>
        <h1 class="colors">{{newText1 + newText2}}</h1>
        <!-- 说明一下，在自组件中，我们也可以直接使用传进来的值 -->
        <!-- <h1 class="colors">这是直接使用传递进来的值 {{text1 + text2}}</h1> -->
    </div>
</template>

<script>
export default {
    // 这里可以理解为props定义的东西是我们对外暴露给开发者的参数
    props: [
        "text1",
        "text2",
    ],
    data: function() {
        return {
            newText1: "",
            newText2: "",
        };
    },
    mounted() {
        this.newText1 = this.text1;
        this.newText2 = this.text2;

        // this.newText1 = this.text1 + "这是再处理逻辑1";
        // this.newText2 = this.text2 + "这是再处理逻辑2";
    }
};
</script>

<style>
.colors {
    color: deepskyblue;
}
</style>